<template>
  <div class="container">
    <FmTable ref="fmTable" url="/process/flowable" id="deploymentId" tableName="definition" :columns="columns" :toolbar="['add','del']">
      <template #add="scope">
        <el-button
            type="primary"
            plain
            icon="CirclePlusFilled"
            @click="handleLoadXml(scope)"
        >新增
        </el-button>
      </template>
      <template #version="scope">
        <el-tag size="small" >v{{ scope.row.version }}</el-tag>
      </template>
      <template #opt="scope">
                  <el-button @click="handleLoadXml(scope.row)" icon="Position" type="primary"  link >设计</el-button>
                  <el-button @click="handleAddForm(scope.row)" icon="Promotion" type="primary" link   v-if="scope.row.formId == null">配置主表单</el-button>
                  <el-button @click="handleUpdateSuspensionState(scope.row)" icon="VideoPause" type="danger" link v-if="scope.row.suspensionState === 1">挂起</el-button>
                  <el-button @click="handleUpdateSuspensionState(scope.row)" icon="VideoPlay" type="primary" link v-if="scope.row.suspensionState === 2">激活</el-button>
      </template>
    </FmTable>
    <FmSelectTable  ref="fmSelectTable" @submit="submitFormDeploy" v-model:value="formDeployParam['formId']" title="表单配置" check-type="single" :columns="selectformDeploycolumns" :isShowInput="false" url="/process/flowable" keys="formId"  lable="fromName"   tableName="sysform" >
      <template #opt="scope">
      <el-button
          size="small"
          type="primary"
          icon="view"
          link
          @click="handleDetail(scope.row)"
      >详情</el-button>
      </template>
    </FmSelectTable>
    <el-dialog title="预览表单"  v-model="previewformshow" destroy-on-close :before-close="function (){previewformshow=false}" width="50%">
      <v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef">
      </v-form-render>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import {saveorUpadateDate, saveorUpadateDateParam} from '@/api/index';
import {ref, reactive} from 'vue';
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
const columns=[
  {
    "label": "流程编号",//标签名称
    "index": "deploymentId",//数据库索引
    "rules": [
      {required: true, message: "请输入主键", trigger: "blur",},
    ],//值规则
    "search": true,//是否是搜索表单
    "dataType": "text",//值值类型默认字符类型
    "addable":false
  },
  {
    "label": "流程标识",//标签名称
    "index": "flowKey",//数据库索引
    "rules": [
      {required: true, message: "请输入主键", trigger: "blur",},
    ],//值规则
    "search": true,//是否是搜索表单
    "dataType": "text",//值值类型默认字符类型
    "addable":false
  },
  {
    "type":"dict",
    "label": "流程分类",//标签名称
    "dictkey": "process_type",
    "index": "category",//数据库索引
    "rules": [
      {required: true, message: "请输入主键", trigger: "blur",},
    ],//值规则
    "dataType": "text",//值值类型默认字符类型
    "addable":false
  },
  {
    "label": "流程名称",//标签名称
    "index": "name",//数据库索引
    "rules": [
      {required: true, message: "请输入主键", trigger: "blur",},
    ],//值规则
    "dataType": "text",//值值类型默认字符类型
    "addable":false
  },
  {
    "label": "业务表单",//标签名称
    "index": "formId",//数据库索引
    "rules": [
      {required: true, message: "请输入主键", trigger: "blur",},
    ],//值规则
    "dataType": "text",//值值类型默认字符类型
    "addable":false
  },
  {
    "label": "流程版本",//标签名称
    "index": "version",//数据库索引
    "rules": [
      {required: true, message: "请输入主键", trigger: "blur",},
    ],//值规则
    "dataType": "text",//值值类型默认字符类型
    "addable":false
  },
  {
    "type":"dict",
    "dictkey": "process_status",
    "label": "流程状态",//标签名称
    "index": "suspensionState",//数据库索引
    "rules": [
      {required: true, message: "请输入主键", trigger: "blur",},
    ],//值规则
    "dataType": "text",//值值类型默认字符类型
    "addable":false
  },
  {
    "label": "部署时间",//标签名称
    "index": "deploymentTime",//数据库索引
    "rules": [
      {required: true, message: "请输入主键", trigger: "blur",},
    ],//值规则
    "dataType": "text",//值值类型默认字符类型
    "addable":false
  },
  {
    "type": "opt",//普通行，字典行，自定义行
    "label": "操作",//标签名称
    "index": "opt",//数据库索引
    "rules": [],//值规则
    "width":150,
    "dataType": "text",//值值类型默认字符类型
  }
]
const selectformDeploycolumns=[
  {
    "label": "表单编号",//标签名称
    "index": "formId",//数据库索引
    "dataType": "text",//值值类型默认字符类型
    "addable":false
  },
  {
    "label": "表单名称",//标签名称
    "index": "formName",//数据库索引
    "search": true,//是否是搜索表单
    "dataType": "text",//值值类型默认字符类型
    "addable":false
  },
  {
    "label": "备注",//标签名称
    "index": "remark",//数据库索引
    "dataType": "text",//值值类型默认字符类型
    "addable":false
  },
  {
    "type": "opt",//普通行，字典行，自定义行
    "label": "操作",//标签名称
    "index": "opt",//数据库索引
    "rules": [],//值规则
    "width":150,
    "dataType": "text",//值值类型默认字符类型
  }
]
let fmTable = ref()
let formconfigishow=ref(false)
let formDeployParam=reactive({})
let formJson = reactive({})
const formData = reactive({})
const optionData = reactive({})
const router = useRouter()
const previewformshow=ref(false)
const handleUpdateSuspensionState = (row:any) => {
        let state = 1;
      if (row.suspensionState === 1) {
        state = 2
      }
      const params = {
        deployId: row.deploymentId,
        state: state
      }
      saveorUpadateDateParam("/process/flowable/definition/updateState",params).then(res => {
        ElMessage.success("操作成功");
        fmTable.value.readyGetData()
      });
}
const fmSelectTable=ref(null)
const handleLoadXml = (row:any) => {
  router.push({ path: '/admin/flowable/model',query: { deployId: row.deploymentId }})
}
const handleAddForm=(row:any)=>{
  formDeployParam.deployId = row.deploymentId
  fmSelectTable.value.open()
}
const submitFormDeploy = () => {
  saveorUpadateDate("/process/flowable/sysform/addDeployForm",formDeployParam).then((res)=>{
    fmTable.value.readyGetData()
    ElMessage.success("操作成功")
  })
}
const handleDetail = (row) => {
  formJson=reactive(JSON.parse(row.formContent))
  previewformshow.value=true
}


</script>
